Skip to content

fix(web): 채팅 상세 진입 시 하단 고정 스크롤 개선#511

Merged
manNomi merged 1 commit intomainfrom
fix/chat-initial-scroll-bottom
May 3, 2026
Merged

fix(web): 채팅 상세 진입 시 하단 고정 스크롤 개선#511
manNomi merged 1 commit intomainfrom
fix/chat-initial-scroll-bottom

Conversation

@manNomi
Copy link
Copy Markdown
Contributor

@manNomi manNomi commented May 3, 2026

변경 배경

채팅 상세 페이지(mentor/chat/[chatId]) 진입 시 초기 화면이 상단에서 시작되어 최신 메시지를 바로 확인하기 어려운 문제가 있었습니다.

변경 내용

  • useChatListHandler에 스크롤 제어 상태 추가
    • scrollContainerRef
    • hasInitialAutoScrolledRef
    • prevMessageCountRef
  • 기존 isFetchingNextPage 의존 단일 자동 스크롤 이펙트 제거
  • 초기 진입 시(초기 히스토리 로딩 완료 후) 최초 1회 하단 고정 로직 추가
  • 신규 메시지 수신 시, 사용자가 하단 근처에 있을 때만 자동 하단 이동하도록 조건부 처리
  • 과거 메시지 조회 중(상단 스크롤/이전 페이지 로딩) 자동 점프 방지
  • chatId 변경 시 자동 스크롤 상태 초기화
  • 채팅 메시지 스크롤 컨테이너(overflow-y-auto)에 scrollContainerRef 연결

기대 효과

  • 채팅방 진입/재진입 시 항상 최신 메시지부터 확인 가능
  • 사용자가 과거 메시지를 읽는 중에는 강제 하단 이동이 발생하지 않아 UX 개선

참고

현재 실행 환경에 pnpm/corepack/npm 실행 파일이 없어 CI 명령(lint/typecheck/build)은 로컬에서 실행하지 못했습니다.

@manNomi manNomi requested review from enunsnv and wibaek as code owners May 3, 2026 14:48
@vercel
Copy link
Copy Markdown

vercel Bot commented May 3, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
solid-connection-web Ready Ready Preview, Comment May 3, 2026 2:48pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
solid-connect-web-admin Skipped Skipped May 3, 2026 2:48pm

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 3, 2026

Warning

Rate limit exceeded

@manNomi has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 29 minutes and 41 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 6cd2b854-e457-4de1-bc7a-e96945bb69d8

📥 Commits

Reviewing files that changed from the base of the PR and between 49ba3d3 and 1f9f585.

📒 Files selected for processing (2)
  • apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_hooks/useChatListHandler.ts
  • apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/index.tsx
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/chat-initial-scroll-bottom

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
Review rate limit: 0/1 reviews remaining, refill in 29 minutes and 41 seconds.

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions Bot added the web label May 3, 2026
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1f9f585b26

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment on lines +126 to +129
const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;

if (distanceFromBottom <= BOTTOM_PROXIMITY_THRESHOLD) {
const rafId = requestAnimationFrame(() => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Check bottom proximity before appending new messages

The auto-scroll gate now computes distanceFromBottom only after submittedMessages.length has already increased, so users who were exactly at the bottom can still fail the <= 80 check when a newly received message is taller than 80px (e.g., long text or image). In that case, the view stops following new messages even though the user never scrolled up, which regresses expected chat behavior for active conversations.

Useful? React with 👍 / 👎.

@manNomi manNomi merged commit 3446fa0 into main May 3, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant